<template>
    <div class="w-100 h-100">
      <div style="height: 60px;">
        <tablleBar
          @submit-swich="swichTable"
          :list="['湖泊', '港渠']"
        ></tablleBar>
      </div>
      <div class="w-100 h-10 d-flex justify-content-end" style="position: absolute;right: 0; top: 70px;">
        <lineLabel v-for="(item,index) in hb" style="margin-left: 10px" :shapeColor="colorSingleList[index]" :text="item" />
      </div>
      <div style="height: calc(100% - 80px)">
        <div id="yzhlqs" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  import tablleBar from "@/components/project/tablleBar.vue";
  import { useOptions } from "@/hook/useOptions";
  const hb = ['墨水湖', '龙阳湖', '月湖', '莲花湖']
  const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)", "rgba(230,253,255, 1)", "rgba(96,255,206, 1)"];

  const props = defineProps({
    year: {
        default: 2024
    },
    unit: {
        default: 1
    }
  })

  let activeItem = ref(0)

  const swichTable = (item: any) => {
    activeItem.value = item;
  };
  
  const jsonData: any = inject("jsonData");
  const current = computed(() => {
    let data = [[], []];
    try {
      data = jsonData.value.yxjk.yzhlqs[props.year][props.unit][activeItem.value];
    } catch (error) {}
    return data;
  });
  let myChart: any;
  
  watch(
    () => current.value,
    (val) => {
      if (val) {
        const obg:any = useOptions().waterUnit.find(item => item.value == props.unit)
        const unit = obg.label
        myChart.setOption({
          yAxis: [{name: unit}],
          series: [{ data: val[0] },{ data: val[1] }, {data: val[2]}, {data: val[3]}],
        });
      }
    }
  );
  
  onMounted(() => {
    let option: any = {
      color: colorSingleList,
      tooltip: {
        show: true,
        trigger: "axis",
        borderColor: "transparent",
        backgroundColor: "rgba(28,64,81,0.7)",
        textStyle: {
          color: "white",
          fontSize: 20,
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "5%",
        top: "14%",
        containLabel: true,
      },
      //你的代码
      xAxis: {
        name: '',
        type: "category",
        data: useOptions().month,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "#667A8E",
          },
        },
        axisLabel: {
          textStyle: {
            fontSize: 20,
            color: "#667A8E",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          name: "",
          type: "value",
          nameTextStyle: {
            color: "#fff",
            fontWeight: 400,
            fontSize: 14,
          },
          axisLabel: {
            fontSize: 20,
            color: "#667A8E",
            formatter: "{value}" + "",
          },
          splitLine: {
            // 配置分割线
            show: true,
            lineStyle: {
              color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
              type: "solid", // 实线
            },
          },
        },
      ],
      series: [
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(3, 230, 254, 1)",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(3, 230, 254, 0.8)", // 颜色渐变起始颜色
                },
                {
                  offset: 1,
                  color: "rgba(3, 230, 254, 0)", // 颜色渐变结束颜色
                },
              ]),
            },
          },
        },
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(184, 235, 143, 1)",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(184, 235, 143, 0.8)", // 颜色渐变起始颜色
                },
                {
                  offset: 1,
                  color: "rgba(184, 235, 143, 0)", // 颜色渐变结束颜色
                },
              ]),
            },
          },
        },
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(230,253,255, 1)",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(230,253,255, 0.8)", // 颜色渐变起始颜色
                },
                {
                  offset: 1,
                  color: "rgba(230,253,255, 0)", // 颜色渐变结束颜色
                },
              ]),
            },
          },
        },
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(96,255,206, 1)",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(96,255,206, 0.8)", // 颜色渐变起始颜色
                },
                {
                  offset: 1,
                  color: "rgba(96,255,206, 0)", // 颜色渐变结束颜色
                },
              ]),
            },
          },
        },
      ],
    };
  
    myChart = echarts.init(document.getElementById("yzhlqs") as HTMLElement);
    myChart.setOption(option);
  });
  </script>
  
  <style></style>
  